<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="/socket.io/socket.io.js"></script>

<body>
    <div>username:<input type='text' id='username'></div>
    <div>password:<input type='password' id='password'></div>
    <button id='login'>login</button>
    <script>
        let loginBtn = document.querySelector('#login');
        loginBtn.addEventListener('click', function() {
            const inputUsername = document.querySelector('#username').value;
            const inputPassword = document.querySelector('#username').value;

            // const socket = io();
            // socket.on('connect', () => {
            //     console.info('connect');
            // });
            // socket.on('disconnect', () => {
            //     console.info('disconnect');
            // });
            // if (username === 'admin' && password === 'admin') {
            //     window.location.href = './chat.html'
            // } else {
            //     alert('username or password is wrong');
            // }
            // console.log(username);

            socket = io({
                query: {
                    name: inputUsername,
                    password: inputPassword
                },
                reconnection: false,
            });
            socket.on('connect', () => {
                console.info('connect');
                login.setAttribute()
            });
            socket.on('disconnect', () => {
                console.info('disconnect');
            });
        })
    </script>
</body>

</html>